{{!-- template-lint-disable no-invalid-interactive --}}
<div
  class="{{this.nachoPillBaseClass}} {{this.baseClass}} {{this.pillClasses}}"
  {{on "click" this.onClick}}
  {{did-insert this.didRender}}
  >
  {{#if this.isEditing}}
    {{#if @isTypeahead}}
      <PowerSelectTypeahead
        @dropdownClass="{{this.baseClass}}__dropdown"
        @triggerClass="{{this.baseClass}}__input"
        @onchange={{fn this.userConfirmedEntry}}
        @search={{@onSearch}}
        @onblur={{fn this.onBlur}}
        @placeholder={{@placeholder}}
        @noMatchesMessage="No results found"
      as |option|
      >
        {{yield option}}
      </PowerSelectTypeahead>
    {{else}}
      <Input
        class="{{this.baseClass}}__input"
        @value={{this.tagValue}}
        @enter={{fn this.userConfirmedEntry}}
        {{on "focusout" (fn this.userFocusedOut)}}
        {{on "keydown" (fn this.userKeyDown)}}
        @maxlength={{@maxlength}}
      />

      <button
        type="button"
        class="{{this.baseClass}}__action"
        {{on "click" (fn this.userConfirmedEntry this.tagValue)}}
      >
        <FaIcon @icon="plus" class="{{this.baseClass}}__icon" />
      </button>
    {{/if}}

  {{else}}
    {{!-- Tag has value and should be a basic display --}}
    {{#if @value}}
      {{@value}}
      <button
        type="button"
        class="{{this.baseClass}}__action"
        {{on "click" (fn this.userDeletedTag)}}
      >
        <FaIcon @icon="times" class="{{this.baseClass}}__icon" />
      </button>

      {{!-- Tag does not have value and is meant to let user enter editng mode --}}
    {{else}}
      {{@placeholder}}
      <button
        type="button"
        class="{{this.baseClass}}__action"
        {{action (mut this.isEditing) true}}
      >
        <FaIcon @icon="plus" class="{{this.baseClass}}__icon" />
      </button>
    {{/if}}
  {{/if}}
</div>